<template>
	<view class="container">
		<!-- 待分拣  已完成 -->
		<view class="tabs">
			<view class="TB-B" v-for="(item,index) in arrs" :key="index" @click="handleIndex(index)">
				<view></view>
				<view :class="index==indexID?'items':'items_active'">{{item}}</view>
				<view :class="index==indexID?'line':'line_active'"></view>
			</view>
		</view>
		<!-- 商品名称 -->
		<view class="goodsName" >
			<view style="font-weight: bold;" >{{items.productName||''}}</view>
			<view>需分配总量：{{totalAllocation()}}{{items.unitName||''}}</view>
			<view>已扫：{{ScannedTotal()||0}}{{items.unitName||''}}</view>
		</view>
		<!-- 根据带分拣和已完成  显示对应的数据 -->
		<view class="NFC" v-if="indexID==0">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view v-for="(item,index) in list" :key="index">
					<view class="nt-1">
						<view class="nt-2" @click="handleAllBox(index)">{{item.receiverDetailAddress}}</view>
						<view @click="NFCRead(index,index1,0)" class="NFCRead">
							<view class="fid" v-if="item.shelfId">{{item.shelfId}}</view>
							<view style="font-size: 24rpx;color: #177A77 ;" v-else>NFC位置扫描
							</view>
						</view>
					</view>
					<view class="codeNfc" v-for="(item1,index1) in item.info" :key="index1">
						<view class="codeNfc-1" @click="NFCRead(index,index1,1)">
							<view v-if="item1.boxId">{{item1.boxId}}</view>
							<view v-else>NFC</view>
							<image style="width: 32rpx;height: 36rpx;margin-left: 43rpx;" src="/static/work/nfc_01.png"
								mode=""></image>
						</view>
						<view class="codeNfc-2" @click="handleBox(index,index1)">
							<view>{{item1.count||0}}件</view>
						</view>
						<view class="ciang" @click="handleCode(index,index1)">入箱</view>
						<view class="ciang" @click="handleOut(index,index1)">出箱</view>
						<view class="ciang" @click="handleRemove(index,index1)">清箱</view>

						<!-- 删除 -->
						<view class="codeNfc-3">
							<image class="reductIma" src="/static/work/cg_add04.png" mode=""
								@click="deletaTransferBox(index,index1)" />
						</view>
					</view>
					<view class="KA">
						<image style="width: 28rpx;height: 28rpx;" src="/static/work/cg_add01.png" mode=""></image>
						<view style="margin-left: 12rpx;" @click="addTransferBox(index,index1)">添加转运框</view>
					</view>
					<view class="FBQR">
						<view class="FBQR-1">
							<view class="l" >总量：{{item.count}}件</view>
							<view class="j">已扫：<view class="jj">{{setIds(item.info)}}件</view>
							</view>
						</view>
						<view class="submit">
							<u-button :custom-style="customStyleBtn1" @click="submit(index,index1)">关单</u-button>
						</view>
					</view>
					<view class="lines"></view>
				</view>

			</scroll-view>

		</view>
		<!-- 根据带分拣和已完成  显示对应的数据 -->
		<view class="NFC" v-if="indexID==1">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view v-for="(item,index) in list" :key="index">
					<view class="nt-1">
						<view>{{item.receiverDetailAddress}}</view>
						<view style="font-size: 24rpx;color: #CCCCCC;">{{item.shelfId}}</view>
					</view>
					<view class="codeNfc" v-for="(item1,index1) in item.info" :key="index1">
						<view class="codeNfc-1" @click="NFCRead(index)">
							<view>{{item1.boxId}}</view>
							<image style="width: 32rpx;height: 36rpx;margin-left: 43rpx;" src="/static/work/nfc_01.png"
								mode="">
							</image>
						</view>
						<view class="codeNfc-2">
							<view>{{item1.count}}</view>
							<image style="width: 34rpx;height: 34rpx;margin-left: 43rpx;" src="/static/work/code_02.png"
								mode=""></image>
						</view>
						<!-- <view class="codeNfc-3">
						<image class="reductIma" src="/static/work/cg_add04.png" mode=""/>
					</view> -->
					</view>
					<!-- <view class="KA">
						添加转运框
					</view> -->
					<view class="FBQR">
						<view class="FBQR-1">
							<view class="l">总量：{{item.count}}</view>
							<view class="j">已扫：{{setIds(item.info)}}</view>
						</view>
						<!-- <view class="submit">
						<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">分拨确认</u-button>
					</view> -->
					<view style="display: flex;align-items: center;">
						<view class="submit">
							<u-button :loading='loading' :custom-style="customStyleBtn1" @click="handleBilling(index,index1)">开单</u-button>
						</view>
						<view class="submit" style="margin-left: 20rpx;">
							<u-button :loading='loading' :custom-style="customStyleBtn1" @click="handlePush(index,index1)">推送</u-button>
						</view>
					</view>
						
					</view>
					<view class="lines"></view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getOrderList,
		binging,
		carOutToBox,
		verifyBoxFinish,
		boxFinish,
		checkLogisticShelf,
		changeShelf,
		unBingingBox,
		boxToCar,
		clearBox,
		closeOrder,
		openOrder
	} from '@/api/store.js'
	import NFC from './NFC.js'
	export default {
		data() {
			return {
				customStyleBtn4: {
					width: '200rpx',
					height: '60rpx',
					borderRadius: '5rpx',
					background: "#177A77",
					fontSize: '24rpx',
					color: '#FFFFFF',
					border: 'none'
				},
				customStyleBtn3: {
					width: '200rpx',
					height: '60rpx',
					borderRadius: '5rpx',
					fontSize: '24rpx',
					color: '#909399',
					border: '1rpx soled #909399'
				},
				show: false, //确认弹窗
				scrollTop: 0,
				loading: false,
				customStyleBtn1: {
					width: '154rpx',
					height: '50rpx',
					borderRadius: '25rpx',
					background: "#177A77",
					fontSize: '24rpx',
					color: '#FFFFFF',
					border: 'none'
				},
				customStyleBtn2: {
					width: '154rpx',
					height: '50rpx',
					borderRadius: '25rpx',
					background: "#F2F2F2",
					fontSize: '24rpx',
					color: '#999999 ',
					border: 'none'
				},
				indexID: 0,
				arrs: ['待分拣', '已完成'],
				queryParams: {
					pageNo: 1, //页码
					pageSize: 20, //条数
					skuId: '', //商品编号
					type:0
				},
				list: [], //数据
				total: 0, //总数
				index: 0,//所选下标
				index1: 0,//所选下标
				type: 0, //0为货架 1为周转箱
				items: {},//上个页面的列表对象
				info: [], //所有已扫描货品的集合
				isProcessing: true,
				isArray: []
			}
		},
		
		onLoad(options) {
			this.items = JSON.parse(decodeURIComponent(options.item))
			this.queryParams.skuId = JSON.parse(decodeURIComponent(options.item)).skuId
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('customEvent', this.handleCustomEventBind);
			this.getList()
		},
		onShow() {
			NFC.listenNFCStatus() //nfc初始化
		},
		methods: {
			// 获取已完成数据
			async getCompleted(){
				
			},
			// 获取待分拣数据
			async getList() {
				let res = await getOrderList(this.queryParams)
				console.log('res:',res);
				this.list = res.data.list.map(item => {
					return {
						...item,
						info: item.info.length > 0 ? (
							item.info.map(val => {
								return {
									boxId: val.boxId,
									count: val.count,
									ids: []
								}
							})
						) : (
							[{
								boxId: null,
								count: 0,
								ids: []
							}]
						)

					}
				})
				this.total = res.data.total
				this.ScannedTotal() //计算已扫
				this.totalAllocation() //计算未分配总数
			},
			// NFC读芯片
			NFCRead(index, index1, type) {
				this.type = type
				this.index = index
				this.index1 = index1
				if (type == 1) {
					//判断是不是换箱子操作，如果是换箱子先查看boxId是否存在，如果存在点击就是解绑操作
					if (this.list[this.index].info[this.index1].boxId) {
						uni.showModal({
							title: '提示',
							content: '是否解绑转运箱？',
							success: (res) => {
								if (res.confirm) {
									let data = {
										orderId: this.list[this.index].id,
										boxId: this.list[this.index].info[this.index1].boxId,
										shelfId: this.type == 0 ? event.data : this.list[this.index]
											.shelfId
									};
									unBingingBox(data).then(res=>{
										uni.showToast({
											title:'解绑成功',
											icon:'none'
										})
										if(this.list[this.index].info.length!=1){
											this.list[this.index].info.splice(this.index1,1)
										}
										this.$nextTick(() => {
											this.list[this.index].info[this.index1].boxId = ''
										})
									})
								}
							}
						})
						return
					}
				}
				this.isArray = []
				this.isProcessing = false
				uni.showLoading({
					title: 'NFC读取中...',
					icon: 'none'
				})
				NFC.readData(); //读nfc
			},
			// 弹窗查看箱内已选商品列表，确认无误点击提交，上面弹窗已注释，暂无使用
			async handleCodeSubmit() {},
			// 待分拣  已完成 点击回去下标 
			handleIndex(index) {
				this.indexID = index
				this.queryParams.type = index
				this.list=[]
				this.getList() // 获取待分拣数据
				
			},
			//获取NFC读取到的数据
			handleCustomEvent(event) {
				if (this.isProcessing) return
				this.isArray.push(event.data)
				if (this.isArray.length == 1) {
					// 如果已经在处理中，直接返回，不做任何操作
					
					if (this.type == 0) { // 货架
						// 调接口验证货架是否绑定
						checkLogisticShelf(event.data).then(res => {
							console.log('绑定货架',res.data);
							if (!res.data) {
								if (this.list[this.index].shelfId == null) { //如果没有id  绑定
									let data = {
										orderId: this.list[this.index].id,
										boxId: this.type == 1 ? event.data : this.list[this.index].info[this
											.index1].boxId,
										shelfId: this.type == 0 ? event.data : this.list[this.index].shelfId
									};
									binging(data).then(res=>{
										uni.showToast({
											title:'绑定成功',
											icon:'none'
										})
										this.$nextTick(()=>{
											this.list[this.index].shelfId = event.data;
										})
									})
								} else { //如果已经存在id 换绑
									let data = {
										orderId: this.list[this.index].id,
										boxId: this.type == 1 ? event.data : this.list[this.index].info[this
											.index1].boxId,
										shelfId: this.type == 0 ? event.data : this.list[this.index].shelfId
									};
									changeShelf(data).then(res=>{
										uni.showToast({
											title:'换绑成功',
											icon:'none'
										})
										this.$nextTick(()=>{
											this.list[this.index].shelfId = event.data;
										})
									})
								}
							}
						})
					}
					if (this.type == 1) { // 转运箱
						if(this.list[this.index].shelfId==null){
							uni.showToast({
								title:'请先绑定货架',
								icon:'none'
							})
						}else{
							if (this.list[this.index].info[this.index1].boxId == null) { //如果为空就是绑定箱子
								let data = {
									orderId: this.list[this.index].id,
									boxId: this.type == 1 ? event.data : this.list[this.index].info[this.index1].boxId,
									shelfId: this.type == 0 ? event.data : this.list[this.index].shelfId
								};
								binging(data).then(res=>{
									uni.showToast({
										title:'绑定成功',
										icon:'none'
									})
									this.list[this.index].info[this.index1].boxId = event.data;
								})
							}
						}
					}
					setTimeout(() => {
						this.isProcessing = true
					}, 500)
				}
			},
			// 扫码入箱
			handleCode(index, index1) {
				let sum = this.setIds(this.list[index].info)
				if (sum == this.list[index].count) {
					uni.showToast({
						title: '数量已满',
						icon: 'none'
					})
					return
				}
				this.index = index
				this.index1 = index1
				// 只允许通过相机扫码
				uni.scanCode({
					// scanType: ['pdf417'], //barCode 一维码，qrCode 二维码，datamatrix Data Matrix 码，pdf417 PDF417 条码
					onlyFromCamera: true,
					success: async (scanRes) => {
						let code = scanRes.result;
						if (this.setIds(this.list[index].info) == this.list[index].count) {
							uni.showToast({
								title: '商品不能大于总量',
								icon: 'none'
							})
							return
						}
						let data = {
							skuId: this.items.skuId,
							count: 1,
							productName: this.items.productName,
							boxId: this.list[index].info[index1].boxId,
							orderId: this.list[index].id,
							products: [{
								skuId: this.items.skuId,
								count: 1,
								productName: this.items.productName,
								unitName: this.items.unitName,
								productNo: code
							}]
						}
						let res = await carOutToBox(data)
						this.ScannedTotal()
						if (res.data) {
							uni.showModal({
								title: '提示',
								content: '是否关单？',
								success: res => {
									if (res.confirm) {
										// let data = {
										// 	orderId: this.list[index].id
										// }
										// console.log('data:', data);
										// boxFinish(data).then(res => {
										// 	console.log('res:', res);
										// })
										closeOrder(this.list[index].id).then(res => {
											uni.showToast({
												title:'关单成功',
												icon:'none'
											})
											this.list=[]
											this.getList()
										})
									}
								}
							})
						}
						this.list[index].info[index1].count++
					}
				});
			},
			// 扫码出箱
			handleOut(index, index1) {
				this.index = index
				this.index1 = index1
				uni.showModal({
					title: '提示',
					content: '确认执行出箱操作？',
					success: res => {
						if (res.confirm) {
							// 只允许通过相机扫码
							uni.scanCode({
								// scanType: ['pdf417'], //barCode 一维码，qrCode 二维码，datamatrix Data Matrix 码，pdf417 PDF417 条码
								onlyFromCamera: true,
								success: async (resCode) => {
									console.log('条码类型：' + resCode.scanType);
									console.log('条码内容：' + resCode.result);
									let code = resCode.result;
									let data = {
										skuId: this.items.skuId,
										count: 1,
										productName: this.items.productName,
										boxId: this.list[index].info[index1].boxId,
										orderId: this.list[index].id,
										products: [{
											skuId: this.items.skuId,
											count: 1,
											productName: this.items.productName,
											unitName: this.items.unitName,
											productNo: code
										}]
									}
									let res = await boxToCar(data)
									this.list[index].info[index1].count--
									this.ScannedTotal()
								}
							});
						}
					}
				})
				
			},
			// 清箱
			 handleRemove(index,index1) {
				uni.showModal({
					title: '提示',
					content: '确认清空转运箱？',
					success: async resCode => {
						if (resCode.confirm) {
							let data = {
								skuId: this.items.skuId,
								productName: this.items.productName,
								boxId: this.list[index].info[index1].boxId,
								orderId: this.list[index].id,
								products: [{
									skuId: this.items.skuId,
									productName: this.items.productName,
									unitName: this.items.unitName,
								}]
							}
							let res = await clearBox(data)
							this.list[index].info[index1].count=0
							this.ScannedTotal()
						}
					}
				})
				
			},
			// 开单
			handleBilling(index,index1){
				uni.showModal({
					title: '提示',
					content: '确认开单？',
					success:async (resCode) => {
						if (resCode.confirm) {
							let res = await openOrder(this.list[index].id)
							this.getList()
							this.getCompleted() //开单成功后再次获取已完成数据，刷新数据
						}
					}
				})
			},
			// 推送
			handlePush(index,index1){
				this.index = index
				this.index1 = index1
				uni.showModal({
					title: '提示',
					content: '确认推送？',
					success: (resCode) => {
						if (resCode.confirm) {
							let data = {
								orderId: this.list[index].id
							}
							boxFinish(data).then(res => {
								uni.showToast({
									title:'推送成功',
									icon:'none'
								})
								this.getList()
							})
						}
					}
				})
			},
			// 跳转至详情
			handleBox(index,index1){
				if(this.list[index].info[index1].boxId){
					uni.navigateTo({
						url:'/pages/work/outbound/onebillforDetail?id='+this.list[index].info[index1].boxId
					})
				}else{
					uni.showToast({
						title:'请先绑定转运箱',
						icon:'none'
					})
				}
			},
			// 计算已扫件数
			setIds(arr) {
				const totalQuantity = arr.reduce((sum, item) => sum + item.count, 0);
				return totalQuantity
			},
			// 提前点击封箱
			submit(index, index1) {
				uni.showModal({
					title: '提示',
					content: '确认关单？',
					success: res => {
						if (res.confirm) {
							
							closeOrder(this.list[index].id).then(res => {
								uni.showToast({
									title:'封箱成功',
									icon:'none'
								})
								this.list=[]
								this.getList()
							})
						}
					}
				})
			},
			// 添加转运箱
			addTransferBox(index, index1) {
				this.list[index].info.push({
					boxId: null,
					count: 0
				})
			},
			// 删除准运箱
			deletaTransferBox(index, index1) {
				uni.showModal({
					title: '提示',
					content: '确认删除转运箱？',
					success: res => {
						if (res.confirm) {
							if(this.list[index].info[index1].boxId){ //判断箱子id是否绑定，绑定走接口进行删除
								let data = {
									orderId: this.list[this.index].id,
									boxId: this.list[this.index].info[this.index1].boxId,
									shelfId:this.list[this.index].shelfId
								};
								unBingingBox(data).then(res=>{
									if(this.list[index].info.length !=1){ //判断当前数据数量，如果数组数量等于1  直接删除
										this.list[index].info.splice(index1, 1)
									}else{ //如果数组数量等于1，则清空数据不删除
										this.$nextTick(()=>{
											this.list[index].info[0].boxId=null
											this.list[index].info[0].count=0
											
										})
										
									}
								})
							}else{
								if(this.list[index].info.length !=1){//判断当前数据数量，如果数组数量等于1  直接删除
									this.list[index].info.splice(index1, 1)
								}else{ //如果数组数量等于1，则清空数据不删除
									this.$nextTick(()=>{
										this.list[index].info[0].boxId=null
										this.list[index].info[0].count=0
										
									})
									
								}
							}
						}
					}
				})
			},
			// 获取 info 数组内 ids 数组的总数量
			ScannedNum(arr) {
				// 获取 info 数组内 ids 数组的总数量
				let totalIdsCount = arr.reduce((sum, item) => {
					return sum + item.info.reduce((innerSum, infoItem) => innerSum + infoItem.ids.length, 0);
				}, 0);

				return totalIdsCount // 输出 ids 数组的总数量
			},
			// 计算已扫总数
			ScannedTotal(){
				let totalCount = this.list.reduce((acc, item) => {
				    // 对于每个 item，我们累加其 info 数组中的所有 count 值
				    return acc + item.info.reduce((sum, infoItem) => sum + infoItem.count, 0);
				}, 0); // 初始值为 0
				return totalCount
			},
			// 计算未分配总数
			totalAllocation(){
				let totalCount = this.list.reduce((acc, num)=>{
					return acc + num.count
				},0)
				return totalCount
			},
			// 跳转至详情获取所有转运箱数据
			handleAllBox(index){
				uni.navigateTo({
					url:'/pages/work/outbound/allBox?id='+this.list[index].id
				})
			}
		},
		onHide() {
			uni.hideLoading()
		},
		onUnload() {
			uni.$off('customEvent')
			uni.hideLoading()
		}
	}
</script>

<style scoped>
	.ciang {
		min-width: 80rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: cornflowerblue;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.fid {
		font-size: 24rpx;
		color: #ffffff;
		background-color: cornflowerblue;
		width: 100rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.NFCRead {
		width: 150rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
	}

	.ids-9 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 0 50rpx;
		box-sizing: border-box;
	}

	.ids-8 {
		width: 100%;
		min-height: 90rpx;
		display: flex;
		flex-direction: column;
	}

	.ids-7 {
		width: 200rpx;
		height: 70rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.ids-6-delete {
		width: 120rpx;
		height: 50rpx;
		font-size: 26rpx;
		background-color: #177A77;
		color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.ids-5 {
		width: 100%;
		min-height: 90rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		font-size: 30rpx;
		/* justify-content: space-between; */
	}

	.ids-4 {
		width: 100%;
		height: 600rpx;
	}

	.scroll-ids {
		width: 100%;
		height: 600rpx;
	}

	.ids-3 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
	}

	.ids-2 {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.ids-1 {
		width: 100%;
		height: 800rpx;
		padding: 25rpx 25rpx 0 25rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nt-2 {
		width: 500rpx;
		line-height: 40rpx;
		height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 200rpx);
	}

	.jj {
		border-bottom: 1rpx solid #333333;
	}

	.j {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.l {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* background-color: #333333; */
	}

	.reductIma {
		width: 34rpx;
		height: 34rpx;
	}

	.lines {
		width: 750rpx;
		height: 1rpx;
		background-color: #E8E8E8;
		margin-left: -31rpx;
	}

	.FBQR-1 {
		width: 60%;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.FBQR {
		width: 100%;
		height: 51rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 21rpx 0 2rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #333333;
		margin-top: 29rpx;
		margin-bottom: 43rpx;
	}

	.KA {
		width: 100%;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #177A77;
		margin-top: 42rpx;
	}

	.codeNfc-3 {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.codeNfc-2 {
		flex: 1;
		height: 60rpx;
		background: #F2F2F2;
		border: 1px solid #EBEBEB;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		margin-left: 21rpx;
		/* background-color: #177A77; */
	}

	.codeNfc-1 {
		/* width: 337rpx; */
		flex: 1;
		height: 60rpx;
		background: #F2F2F2;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 21rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #999999;
	}

	.codeNfc {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.nt-1 {
		width: 100%;
		height: 109rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.NFC {
		width: 100%;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		padding: 0 28rpx 0 31rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.goodsName {
		width: 100%;
		height: 100rpx;
		font-size: 26rpx;
		color: #333333;
		padding: 0 29rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #F8F8F8;
	}

	.items {
		color: #177A77;
	}

	.items_active {
		color: #686868;
	}

	.line {
		width: 56rpx;
		height: 6rpx;
		background: #177A77;
		border-radius: 3rpx;
	}

	.line_active {
		width: 56rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 3rpx;
	}

	.TB-B {
		width: 90rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.tabs {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 28rpx;
		background-color: #FFFFFF;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #E8E8E8;
	}
</style>